<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高德地图api定位</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!--首页css预加载-->
    <!-- <script src="/js/LayduiCss.js"></script> -->
    <!--首页地图css样式禁止移动-->
    <link rel="stylesheet" href="./css/map.css"/>
    <!--动态圆在线率插件-->
    <script src="./module/echarts.min.js"></script>
    <script src="./module/jquery.min.js"></script>
    <!--高德地图开始-->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=cc1234b0041662c3f3201635aae7cea4"></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
</head>
<body>

<!-- main 开始 -->
<main>
    <div class="layui-fluid">
        <div class="layui-row">
            <!--内容开始-->
            <div class="layui-col-md12" style="background: #363636;">

                <div id="saul_map">
                    <div class="mapTop">
                        <div class="Time">
                            <p>
                                <span id="Year"></span>&nbsp;年
                                <span id="Month"></span>&nbsp;月
                                <span id="Date"></span>&nbsp;日
                                <span id="Hours"></span>&nbsp;时
                                <span id="Minute"></span>&nbsp;分
                                <span id="Second"></span>&nbsp;秒
                            </p>
                        </div>
                    </div>

                    <div class="LeftStyle">
                        <div class="Map-Top">
                            <div class="layui-col-md12 title">
                                <img src="images/de_ma2.png" alt="">
                                <p>设备概括</p>
                            </div>
                            <div class="layui-col-md5 MapTotal">
                                <div class="layui-col-md12 Envelop">
                                    <div class="layui-col-md12 Device">
                                        <p>设备总数</p>
                                        <div class="layui-col-md12 deviceNum-span" id="deviceNum">
                                            <span>0</span><span>0</span><span>0</span><span>0</span>
                                        </div>
                                    </div>

                                    <div class="layui-col-md12 Device">
                                        <p>在线设备</p>
                                        <div class="layui-col-md12 deviceNum-span" id="statusks">
                                            <span>0</span><span>0</span><span>0</span><span>0</span>
                                        </div>
                                    </div>

                                    <div class="layui-col-md12 Device">
                                        <p>离线设备</p>
                                        <div class="layui-col-md12 deviceNum-span" id="Endks">
                                            <span>0</span><span>0</span><span>0</span><span>0</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md7 circle-div">
                                <div class="layui-col-md12 circle" id="runRate"></div>
                            </div>
                        </div>

                        <div class="Map-List">
                            <div class="layui-col-md12 title-div">
                                <div class="details">
                                    <img src="images/de_ma2.png" alt="">
                                    <p>设备列表</p>
                                </div>
                            </div>

                            <div class="layui-col-md12 deviceList">
                                <div class="layui-col-md12 container" id="my-list"></div>
                            </div>

                        </div>
                    </div>

                    <div class="RightStyle">
                        <div class="Map-Top">
                            <div class="layui-col-md12 title">
                                <img src="images/de_ma2.png" alt="">
                                <p>今日报警统计</p>
                            </div>

                            <div class="layui-col-md5 MapTotal">
                                <div class="layui-col-md12 Envelop">
                                    <div class="layui-col-md12 Device">
                                        <p>报警总数</p>
                                        <div class="layui-col-md12 deviceNum-span" id="Policezs">
                                            <span>0</span><span>0</span><span>0</span><span>0</span>
                                        </div>
                                    </div>

                                    <div class="layui-col-md12 Device">
                                        <p>已处理报警</p>
                                        <div class="layui-col-md12 deviceNum-span" id="PoliceOK">
                                            <span>0</span><span>0</span><span>0</span><span>0</span>
                                        </div>
                                    </div>

                                    <div class="layui-col-md12 Device">
                                        <p>未处理报警</p>
                                        <div class="layui-col-md12 deviceNum-span" id="PoliceNO">
                                            <span>0</span><span>0</span><span>0</span><span>0</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md7 circle-div">
                                <div class="layui-col-md12 circle" id="handleRate"></div>
                            </div>
                        </div>

                        <div class="AlarmList">
                            <div class="layui-col-md6 container">
                                <div class="layui-col-md12 alarm-title">
                                    <img src="images/de_ma2.png" alt="">
                                    <p class="top__map_button_p">报警信息</p>
                                </div>

                                <div class="layui-col-md12">
                                    <div class="layui-col-md12 alarm-content">
                                        <div class="layui-col-md12" id="alarmContent"></div>
                                    </div>
                                </div>
                            </div>
                            <div id="popupNew"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--内容结束-->
        </div>
    </div>
</main>
<!-- main 结束 -->

<!--首页地图js禁止移动-->
<script type="text/javascript" src="js/map.js"></script>
<!--首页地图时间计时器-->
<script src="js/time.js"></script>
<!--首页js-->
<script src="/layui/layui.js"></script>
</body>
</html>
